<template>
  <div class="t-project">
    <div class="t-project-head">
      <h5>项目</h5>
      <el-link>更多</el-link>
    </div>
    <div class="t-project-content">
      <div v-for="(item, index) in projectList" :key="index" :class="['t-project-content-card', index >= projectList.length - ((projectList.length % 3) || 3) ? 'bottom-border-none' : '']">
        <h4>
          <img src="../../../assets/images/tbp.png" alt="">
          <span>{{ item.projectName }}</span>
        </h4>
        <p>{{ item.projectDesc }}</p>
        <div>
          <span>{{ item.deptName }}</span>
          <span>{{ item.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Projects">

const projectList = ref([]);
projectList.value = [
  {
    projectIcon: '',
    projectName: '在线阅读',
    projectDesc: '一个提供在线阅读的好用应用软件，非常适合尝试使用一下',
    deptName: '项目部',
    createTime: '2024-06-06 08:00:03'
  },
  {
    projectIcon: '',
    projectName: '在线阅读',
    projectDesc: '一个提供在线阅读的好用应用软件，非常适合尝试使用一下',
    deptName: '项目部',
    createTime: '2024-06-06 08:00:03'
  },
  {
    projectIcon: '',
    projectName: '在线阅读',
    projectDesc: '一个提供在线阅读的好用应用软件，非常适合尝试使用一下',
    deptName: '项目部',
    createTime: '2024-06-06 08:00:03'
  },
  {
    projectIcon: '',
    projectName: '在线阅读',
    projectDesc: '一个提供在线阅读的好用应用软件，非常适合尝试使用一下',
    deptName: '项目部',
    createTime: '2024-06-06 08:00:03'
  },
  {
    projectIcon: '',
    projectName: '在线阅读',
    projectDesc: '一个提供在线阅读的好用应用软件，非常适合尝试使用一下',
    deptName: '项目部',
    createTime: '2024-06-06 08:00:03'
  }
]

</script>

<style scoped lang="scss">
.t-project {
  background-color: #ffffff;
  border-radius: 8px;

  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    > h5 {
      margin: 0;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);

    }
  }

  &-content {
    display: flex;
    flex-flow: wrap;

    &-card {
      padding: 20px;
      width: 33.33%;
      border-right: 1px solid rgba(0, 0, 0, 0.05);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      cursor: pointer;
      user-select: none;

      > h4 {
        display: flex;
        align-items: center;
        line-height: 0;
        margin: 0 0 10px 0;


        > img {
          width: 24px;
          height: 24px;
        }

        > span {
          margin-left: 10px;
        }
      }

      > p {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
      }

      > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(0, 0, 0, 0.4);
        font-size: 12px;
      }
    }

    &-card:nth-child(3n) {
      border-right: none;
    }
  }
}
</style>

